import {MenuOutlined, RightOutlined, UserOutlined} from "@ant-design/icons";
import Wrapper from "./style.ts";
import task from "@/static/imgs/courseContentNav/任务进程.svg";
import bell from "@/static/imgs/courseContentNav/3.1铃铛.svg";
import logo from "@/static/imgs/courseContentNav/logo_blue.png";
import card from "@/static/imgs/courseContentNav/卡片 (1).svg";
import spike from "@/static/imgs/courseContentNav/回形针 (1).svg";
import setting from "@/static/imgs/courseContentNav/设置 (1).svg";
import quit from "@/static/imgs/courseContentNav/退出 (1).svg";
import {Avatar, Collapse, CollapseProps, Drawer} from "antd";
import React, {CSSProperties, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";


const StudentCourseContentNav = () => {
    // 抽屉
    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };
    const containerRef = useRef<any>(null);

    // 抽屉内容折叠面板
    const TechFigure: React.FC<any> = ({title}) => {
        return (
            <figure className='figure'>
                <img src="https://assets.ketangpai.com/theme/min/31.jpg" alt="" className='head'/>
                <figcaption>{title}</figcaption>
            </figure>
        )
    }


    const Citems: CollapseProps['items'] = [
        {
            key: '1',
            label: '我教的课程',
            children: <>
                <TechFigure title={'数学'}/>
                <TechFigure title={'数学'}/>
                <TechFigure title={'数学'}/>
            </>,
        },
        {
            key: '2',
            label: '我学的课程',
            children: <TechFigure title={'语文'}/>,
        },
        {
            key: '3',
            label: '我协助的课程',
            children: <TechFigure title={'英语'}/>,
        },
    ];
    const onChange = (key: string | string[]) => {
        console.log(key);
    };


    // 头像
    const avatarItemStyle: CSSProperties = {
        display: 'flex',
        alignItems: 'center',
        fontSize: '12px',
        cursor: 'pointer',
        lineHeight: '40px',
        textAlign: 'left',
        paddingLeft: '12px',
        paddingRight: '20px',
        margin: '0 -12px',
    }
    const avatarItemImgStyle: CSSProperties = {
        width: '26px',
        height: '26px',
        marginRight: '8px',
    }
    const AvatarItem = (props: any) => {
        const {title, img} = props
        return (
            <div className='avatar-item' style={avatarItemStyle} onClick={() => {
                title === '退出' && navigate('/')
            }}>
                <img style={avatarItemImgStyle} src={img} alt=""/>
                <div>{title}</div>
            </div>
        )
    }
    const avatarItems = [
        {
            title: '卡片',
            img: card
        },
        {
            title: '回形针',
            img: spike
        },
        {
            title: '设置',
            img: setting
        },
        {
            title: '退出',
            img: quit
        },
    ]

    const [dropDownVisible, setDropDownVisible] = useState(false);

    const navigate = useNavigate()

    return (
        <Wrapper>
            <div className="container flex" ref={containerRef}>
                <Drawer
                    className="drawer"
                    title={<img className='logo' src={logo} alt=""/>}
                    placement={'left'}
                    onClose={onClose}
                    open={open}
                    getContainer={containerRef.current}
                    width={288}
                >
                    <ul>
                        <li className='drawer-item'>我的课堂</li>
                        <li className='drawer-item'>备课区</li>
                        <li className='drawer-item'>虚拟教研室</li>
                    </ul>
                    <Collapse
                        expandIconPosition={'end'}
                        items={Citems}
                        defaultActiveKey={['1']}
                        onChange={onChange}
                        ghost
                    />
                </Drawer>
                <div className="left flex">
                    <div className="menu" onClick={showDrawer}>
                        <MenuOutlined/>
                    </div>
                    <div className="nav flex">
                        <div className="first" onClick={() => {
                            navigate('/studentMyClassroom')
                        }}>我的课堂
                        </div>
                        <div className="right-outline">
                            <RightOutlined style={{color: '#c0c4cc', width: '14px', height: '14px'}}/>
                        </div>
                        <div className="second">课程内容</div>
                    </div>
                </div>
                <div className="right flex">
                    <div className="task flex">
                        <img src={task} alt=""/>
                        <div>任务管理</div>
                    </div>
                    <div className="bell">
                        <img src={bell} alt=""/>
                    </div>
                    <div className="avatar" onClick={() => setDropDownVisible(!dropDownVisible)}>
                        <Avatar size="large" icon={<UserOutlined/>}/>
                        <div className="menu" style={{display: dropDownVisible ? 'block' : 'none'}}>
                            {avatarItems.map((item, index) => {
                                return (
                                    <AvatarItem key={index} title={item.title} img={item.img}/>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </Wrapper>
    );
}
export default StudentCourseContentNav;